<template>
  <div class="settings">
    <el-card class="box-card" v-if="!isMobile">
      <el-row>
        <el-col :span="4" style="margin-right: 10px">
          <el-input
            placeholder="物料编号" size="medium"
            v-model="queryInfo.materialNumber"
            clearable>
          </el-input>

        </el-col>
        <el-col :span="4" style="margin-right: 10px">
          <el-input size="medium"
                    placeholder="物料描述"
                    v-model="queryInfo.materialName"
                    clearable>
          </el-input>
        </el-col>

        <el-col :span="4" style="margin-right: 10px">
          <el-input size="medium"
                    placeholder="领用单位"
                    v-model="queryInfo.receiveUnit"
                    clearable>
          </el-input>
        </el-col>

        <el-col :span="4" style="margin-right: 10px">
          <el-input size="medium"
                    placeholder="项目名称"
                    v-model="queryInfo.projectName"
                    clearable>
          </el-input>
        </el-col>
        <el-col :span="4" style="margin-right: 10px">
          <el-input size="medium"
                    placeholder="单位工程名称"
                    v-model="queryInfo.unitEngName"
                    clearable>
          </el-input>
        </el-col>
        <el-col :span="2">
          <el-button   type="primary" icon="el-icon-search" @click="seacher">搜索</el-button>
        </el-col>
        <el-col :span="2">
          <el-button   type="primary"   @click="exportCollect">导出</el-button>
        </el-col>
        <!--<el-col :span="2"  >-->
          <!--<el-button  type="primary" icon="el-icon-download" @click="downloadTemplate">下载导入模板</el-button>-->
        <!--</el-col>-->
        <!--<el-col :span="2"  >-->
          <!--<el-button    type="primary" icon="el-icon-download" @click="addImoprt">新增导入</el-button>-->
        <!--</el-col>-->
      </el-row>
      <el-table :row-style="{height: '10px'}" :cell-style="{padding:'5px'}" :data="tableData" border v-loading="loading">
        <el-table-column prop="materialNumber" label="物料编码" align="center"  :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="materialName" label="物料描述" :show-overflow-tooltip="true" align="center">
        </el-table-column>
        <el-table-column prop="qut" label="实际领用数量" align="center"  :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="unit" label="计量单位" align="center"  :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="avgPrice" label="单价" align="center"  :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="money" label="总价" align="center"  :show-overflow-tooltip="true">
        </el-table-column>

        <el-table-column prop="receiveUnit" label="领用单位" :show-overflow-tooltip="true" align="center">
        </el-table-column>
        <el-table-column prop="projectName" label="项目名称" :show-overflow-tooltip="true" align="center">
        </el-table-column>
        <el-table-column prop="unitEngName" label="单位工程名称" :show-overflow-tooltip="true" align="center">
        </el-table-column>
        <el-table-column prop="useAddress" label="使用地点" align="center"  :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="professCate" label="专业类别" align="center"  :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="createTime" label="领用时间" align="center"  :show-overflow-tooltip="true">
        </el-table-column>
      </el-table>
      <el-pagination style="text-align: center;" :disabled="loading" @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page="queryInfo.pageNo" :page-sizes="[25,50]" :page-size="queryInfo.pageSize" layout="total, sizes, prev, pager, next, jumper"
                     :total="total">
      </el-pagination>

    </el-card>
      <div class="mobile-box" v-else>
      <el-row>
        <el-col :span="4"  class="mobile-seacher-box">
          <el-input
            placeholder="物料编号" size="medium"
            v-model="queryInfo.materialNumber"
            clearable>
          </el-input>

        </el-col>
        <el-col :span="4"  class="mobile-seacher-box" >
          <el-input size="medium"
                    placeholder="物料描述"
                    v-model="queryInfo.materialName"
                    clearable>
          </el-input>
        </el-col>
        <el-col :span="4"  class="mobile-seacher-box">
          <el-input size="medium"
                    placeholder="领用单位"
                    v-model="queryInfo.receiveUnit"
                    clearable>
          </el-input>
        </el-col>
        <el-col :span="4"  class="mobile-seacher-box">
          <el-input size="medium"
                    placeholder="项目名称"
                    v-model="queryInfo.projectName"
                    clearable>
          </el-input>
        </el-col>
        <el-col :span="4"  class="mobile-seacher-box">
          <el-input size="medium"
                    placeholder="单位工程名称"
                    v-model="queryInfo.unitEngName"
                    clearable>
          </el-input>
        </el-col>
        <el-col :span="2" class="mobile-seacher-box">
          <el-button   type="primary" icon="el-icon-search" @click="seacher">搜索</el-button>
        </el-col>
      </el-row>
      <div >
        <ul v-if="tableData.length" v-loading="loading">
          <li class="list-item" v-for="item in tableData" :key="item.id">
            <el-card>
                <el-col :span="24">
                <div>物料编码：{{ item.materialNumber }}</div>
              </el-col>
            <el-col :span="24">
                <div>物料描述：{{ item.materialName }}</div>
              </el-col>
            <el-col :span="24">
                <div>实际领用数量：{{ item.qut }}</div>
              </el-col>
     <el-col :span="24">
                <div>计量单位：{{ item.unit }}</div>
              </el-col>
                   <el-col :span="24">
                <div>单价：{{ item.avgPrice }}</div>
              </el-col>
                   <el-col :span="24">
                <div>总价：{{ item.money }}</div>
              </el-col>
               <el-col :span="24" class="btn-box">
                <el-button type="primary" size="mini" @click="showDetailFun(item)">详情</el-button>
              </el-col>



              <!-- <el-col :span="24">
                <div>领用单位： {{ item.receiveUnit }}</div>
              </el-col>
              <el-col :span="24">
                <div>项目名称：{{ item.projectName }}</div>
              </el-col>
              <el-col :span="24">
                <div>单位工程名称：{{ item.unitEngName }}</div>
              </el-col>
              <el-col :span="24">
                <div>使用地点：{{ item.useAddress }}</div>
              </el-col>
              <el-col >
                <div>专业类别：{{item.professCate}}</div>
              </el-col>
               <el-col >
                <div>领用时间：{{item.createTime}}</div>
              </el-col> -->
            </el-card>
          </li>
          <el-pagination
            v-if="total >= queryInfo.pageSize"
            style="text-align: center; width: 90%; overflow: auto"
            :disabled="loading"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryInfo.pageNo"
            :page-sizes="[25, 50]"
            :page-size="queryInfo.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </ul>
        <div v-if="!tableData.length" class="no-data">
          <img :src="require('../../../assets/noData.jpg')" />
        </div>
      </div>
       <el-dialog
        :modal-append-to-body="false"
        :close-on-click-modal="false"
        @close="closeDetailFun"
        title="详情"
        :visible.sync="showDetail"
        width="90%"
        class="detail-box"
      >
        <div>物料编码：{{ detailData.materialNumber }}</div>
        <div>物料描述：{{ detailData.materialName }}</div>
        <div>实际领用数量：{{ detailData.qut }}</div>
        <div>计量单位：{{ detailData.unit }}</div>
         <div>单价：{{ detailData.avgPrice }}</div>
         <div>总价：{{ detailData.money }}</div>

        <div>领用单位： {{ detailData.receiveUnit }}</div>

         <div>项目名称：{{ detailData.projectName }}</div>
       <div>单位工程名称：{{ detailData.unitEngName }}</div>
         <div>使用地点：{{ detailData.useAddress }}</div>
       <div>专业类别：{{detailData.professCate}}</div>
         <div>领用时间：{{detailData.createTime}}</div>
      </el-dialog>
    </div>

  </div>
</template>

<script>
  import { receiveTrans,exportReceiveTrans } from '@/api/materialScience/materialRequisition.js'
  let $this = null
  export default {
    name:'actualCollection',
    data(){

      return {
        tableData: [],
        total: 0,
        isMobile:false,
       showDetail:false,
        //  手机
      detailData:{},
        queryInfo: {
          pageNo: 1,
          pageSize: 25,
          creatorName: ''
        },
        importVisible:false,
        importForm:{
          importType:5,
          fileName:''
        },
      }

    },
    created() {
      $this = this
       if (this.$utils.isMobile()) {
      this.isMobile = true;
    }
      $this.getPageDrawApplyTrans()
    },
    methods:{
      downloadFile (res, name) {
        const blob = new Blob([res.data])
        const fileName = name + '.xlsx'
        const elink = document.createElement('a')
        elink.download = fileName
        elink.style.display = 'none'
        elink.href = URL.createObjectURL(blob)
        document.body.appendChild(elink)
        elink.click()
        URL.revokeObjectURL(elink.href)
        document.body.removeChild(elink)
      },
      exportCollect(){

        exportReceiveTrans($this.queryInfo).then(res=>{
          this.downloadFile(res, '领用物料统计')
        })

      },
      addImoprt () {
        this.importVisible = true
      },
      getPageDrawApplyTrans () {
        $this.loading = true
        receiveTrans($this.queryInfo).then(res => {
          $this.loading = false
          if (res.data.code != 200) {
            return $this.$message.error(res.data.message)
          }
          res.data.data.records.map(item => {
            item.children = [];
          })
          $this.tableData = res.data.data.records
          $this.total = res.data.data.total
        }).catch(err => {
          $this.loading = false
          return $this.$message.error(err.message)
        })
      },

      handleCurrentChange (val) {
        $this.queryInfo.pageNo = val
        $this.getPageDrawApplyTrans()

      },
      handleSizeChange (size) {
        $this.queryInfo.pageSize = size
        $this.getPageDrawApplyTrans()
      },
      seacher (key) {
        $this.getPageDrawApplyTrans()
      },
        //手机
    //显示详情
    showDetailFun(item){
      $this.showDetail=true
      $this.detailData=item
    },
    //关闭详情弹窗
    closeDetailFun(){
      $this.detailData={}
      $this.showDetail=false
    }

    }
  }



</script>
<style scoped lang="scss">
@mixin box-width {
    width: 90%;
    margin: 10px auto;
  }
  .mobile-box {
    position: relative;
    .el-row{
      display: flex;
      flex-direction: column;
    }
    .btn-data {
      @include box-width;
    }
    .mobile-seacher-box{
      width: 90%;
      margin: 5px auto;
    }
    ul {
      padding: 0;
      & > li {
        @include box-width;
        list-style-type: none;
        .btn-box {
          text-align: right;
          margin-bottom: 10px;
        }
        .el-col {
          margin: 5px 0;
        }
      }
    }
    .no-data {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      img {
        width: 400px;
      }
    }
    .addForm {
      .el-input,
      .el-select,
      .el-textarea{
        width: 100%;
      }
      .el-form-item{
        padding: 0 20px;
        margin-bottom: 10px;
        .btn-box{
          width: 100%;
          text-align: center;
          margin: 20px 0;
          .el-button{
            width: 45%;
          }
        }
      }
    }
    .detail-box{
      overflow: auto;
      div{
        margin: 5px 0;
        font-size: 15px;
      }
    }
  }
</style>
